<template>
  <div class="bc" v-bind:style="{'height':clientHeight + 'px'}">
    <div class="home-menu-list">
      <div class="home-menu-box">
        设备详情
        <span>IE-BOX1M00535</span>
      </div>
      <div class="home-menu-box">
        位置信息
        <input type="text" @click="choseAdd" placeholder="请选择" readonly="readonly" v-model="name">
      </div>
      <section class="showChose" v-show="showChose">
        <section class="address">
          <section class="title">
            <h4>位置信息</h4>
            <span @click="closeAdd()">×</span>
          </section>
          <ul>
            <li class="addList" v-for="(v,k) in info" :key="'bind'+k" @click="getProvinceId(v.id, v.placeName, k)" v-show="showProvince" :class="v.selected ? 'active' : ''">{{v.placeName}}</li>
          </ul>
        </section>
      </section>
      <div class="home-menu-box">
        WiFi名称
        <input type="text"  onkeyup="value=value.replace(/[\W]/g,'') " onbeforepaste="clipboardData.setData('text',clipboardData.getData('text').replace(/[^\d]/g,''))" placeholder="输入WiFi名" v-model="vifiName">
      </div>
      <div class="home-menu-box">
        WiFi密码
        <input type="text" onkeyup="value=value.replace(/[\W]/g,'') " onbeforepaste="clipboardData.setData('text',clipboardData.getData('text').replace(/[^\d]/g,''))" placeholder="设置密码" v-model="vifiPwd">
      </div>
    </div>
    <div class="input-button blue" @click="bind">绑 定</div>
    <div class="input-button white">返 回</div>
  </div>
</template>

<script>
import { Toast, Confirm } from 'vue-ydui/dist/lib.rem/dialog'
import {PLACELIST, VXBIND} from '../../api/request'
export default {
  name: 'index',
  data () {
    return {
      clientHeight: document.documentElement.clientHeight,
      devid: '898602B11116C14544758',
      placeCode: '205',
      vifiName: '',
      vifiPwd: '',
      name: '123',
      showChose: false,
      showProvince: true,
      province: 0,
      GetProvinceId: 0,
      Province: false,
      // v-for循环判断是否为当前
      selected: false,
      info: [
      ]
    }
  },
  created () {
    this.addlist()
  },
  methods: {
    bind: function () {
      Confirm({
        mes: '是否确认绑定该设备',
        opts: () => {
          VXBIND(this.$store.getters.uid, this.devid, this.placeCode, this.vifiName, this.vifiPwd).then(
            res => {
              console.log(res.data)
              if (res.data.code === 200) {
                //  console.log(res.data)
                Toast({mes: ' 绑定成功 ', timeout: 1000})
                this.$router.push({path: '/login'})
              } else {
                console.log(res.data.code)
                Toast({mes: res.data.msg, timeout: 1000})
              }
            },
            error => {
              console.log(error)
            })
        }
      })
    },
    addlist: function () {
      const that = this
      PLACELIST(this.$store.getters.uid).then(
        res => {
          let respData = res.data
          if (respData.code === 200) {
            console.log(respData.data)
            that.info = that.info.concat(respData.data)
          } else {
          }
        },
        error => {
          console.log(error)
        })
    },
    choseAdd: function () {
      this.showChose = true
      this.showProvince = true
    },
    closeAdd: function () {
      this.showChose = false
    },
    getProvinceId: function (code, input, index) {
      this.province = code
      this.Province = input
      // 点击选择当前
      // this.info.map(a => a.selected = false)
      this.info[index].selected = true
      this.name = input
      this.showChose = false
    },
    provinceSelected: function () {
      // 选项页面的切换
      this.showProvince = true
    }
  }
}
</script>

<style scoped>
  .bc{
    position: relative;
    background-color: #ebebeb;
    padding-top: 0.2rem;
  }
  .home-menu-list{
    width: 100%;
    min-height: 0.95rem;
  }
  .home-menu-box{
    height: 0.95rem;
    line-height: 0.95rem;
    vertical-align: middle;
    color: #484848;
    background-color: #fff;
    font-size: 0.3rem;
    padding-left: 0.4rem;
    padding-right: 0.3rem;
    border-bottom: solid 1px #e4e5e6;
  }

  .home-menu-box span{
    color: #565656;
    font-size: 0.3rem;
    float: right;
  }
  .home-menu-box input{
    height: 0.92rem;
    line-height: 0.92rem;
    font-size: 0.3rem;
    color: #484848;
    float: right;
    text-align: right;
  }
  .white{
    background-color: #fff;
    color: #0092f8;
    box-shadow: 0 0 0.2rem 0.1rem rgba(194, 198, 199, 0.1);
    border-radius: 0.1rem;
    margin-top: 0.28rem;
  }
  .blue{
    margin-top: 1.6rem;
    box-shadow: 0 0 0.2rem 0.1rem rgba(194, 198, 199, 0.1);
    border-radius: 0.1rem;
    background-color: #0092f8;
  }
  .setaddress{
    font-size:0.32rem;
    line-height:0.88rem;
    font-weight:normal;
    color:#999;
  }
  .myAddress{
    width: 100%;
    background-color: white;
    border-top: 4px solid rgba(245,245,245,1);
    color:#333;
  }
  .myAddress .cont{
    border-bottom: 1px solid rgba(245,245,245,0.8);
  }
  .myAddress .cont span{
    display: inline-block;
    font-size: 0.28rem;
    color: #333;
    line-height: 0.88rem;
    margin-left: 0.32rem;
  }
  .myAddress .cont section{
    float:left;
  }
  .myAddress .cont p{
    display: inline-block;
    font-size: 0.28rem;
    color: #333333;
    line-height: 0.88rem;
    margin-left: 1rem;
  }
  .myAddress .cont .pic2{
    float: right;
    width: 0.14rem;
    height: 0.24rem;
    margin: 0.32rem 0.32rem 0.32rem 0;
  }
  .myAddress .cont p.text{
    margin-left: 0.72rem;
  }
  .showChose{
    width:100%;
    height:100%;
    position:fixed;
    top:0;
    left:0;
    z-index:120;
    background:rgba(77,82,113,0.8);
  }
  .address{
    position:absolute;
    bottom:0;
    left:0;
    z-index:121;
    background:#fff;
    width:100%;
  }
  .title h4{
    display:inline-block;
    margin-left:3.2rem;
    font-size:0.32rem;
    line-height:0.88rem;
    font-weight:normal;
    color:#999;
  }
  .title span{
    margin:0.42rem 0 0 2.2rem;
    font-size:0.45rem;
    line-height:0.34rem;
    color:#D8D8D8;
  }
  .area{
    display:inline-block;
    font-size:0.24rem;
    line-height:0.88rem;
    margin-left:0.42rem;
    color:#333;
  }
  .addList{
    text-align: center;
    width:100%;
    font-size:0.34rem;
    line-height:0.78rem;
    color:#333;
  }
  /* 修改的格式 */
  .address ul{
    width:95%;
    height:100%;
    max-height: 4.4rem;
    overflow:auto;
  }
  .address ul li{
    margin-left:5%;
  }
  .address .title .active{
    color:#0071B8;
    border-bottom:0.02rem solid #0071B8;
  }
  .address ul .active{
    color:#0071B8;
  }
</style>
